<script setup lang="ts">
import Bar from "./Bar.vue";
import Pie from "./Pie.vue";
import HomePie from "./HomePie.vue";
import Line from "./Line.vue";
import TypeIt from "@/components/ReTypeit";
import { useWindowSize } from "@vueuse/core";
import { ref, computed, onMounted, reactive, markRaw } from "vue";

defineOptions({
  name: "TwoChart"
});

const list = ref();
const loading = ref<boolean>(true);
const titleClass = computed(() => {
  return ["text-base", "font-medium"];
});

// 监听窗口大小
const { height } = useWindowSize();

setTimeout(() => {
  loading.value = !loading.value;
}, 800);

onMounted(() => {});
</script>

<template>
  <div>
    <!-- 分成多少份 -->
    <el-row :gutter="24">
      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <Line height="200px" />
          </template>
        </el-skeleton>
      </el-col>

      <el-col
        v-motion
        :xs="24"
        :sm="24"
        :md="12"
        :lg="12"
        :xl="12"
        class="mb-[18px]"
        :initial="{
          opacity: 0,
          y: 100
        }"
        :enter="{
          opacity: 1,
          y: 0,
          transition: {
            delay: 400
          }
        }"
      >
        <el-skeleton animated :rows="7" :loading="loading">
          <template #default>
            <!-- <Pie height="200px" /> -->
            <HomePie height="200px" />
          </template>
        </el-skeleton>
      </el-col>
    </el-row>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-timeline-item) {
  margin: 6px 0 0 6px;
}

:deep(.el-card__header) {
  padding: 5px 10px 5px;
}

.main-content {
  margin: 20px 20px 0 !important;
}
</style>
